<!DOCTYPE html>
<html>
<head>
	<title>Calculator</title>

	<style type="text/css">
		table{border-collapse:collapse;}
		td{padding:10px;border:1px solid #000}
		.row1{background-color:#ff0;}
		.row2{background-color:#fc6;}
		.row3{background-color:#ccf;}
		.row4{background-color:#fe6;}
		.row5{background-color:#daf;}
	</style> 
</head>
<body>
	<h3>Calculator</h3>
	<form action="" method="post">
		<table cellspacing="0" cellpadding="0">
			<tr class="row1">
				<td colspan = "4" >
				<textarea id="result" dir="rt1">
				123
				</textarea>
				</td>
			</tr>
			
			<tr class="row2">
				<td >
				<input type="button" value="1">
				</td>
				<td >
				<input type="button" value="2">
				</td>
				<td >
				<input type="button" value="3">
				</td>
				<td >
				<input type="button" value="+">
				</td>
			</tr>
			
			<tr class="row3">
				<td >
				<input type="button" value="4">
				</td>
				<td >
				<input type="button" value="5">
				</td>
				<td >
				<input type="button" value="6">
				</td>
				<td >
				<input type="button" value="-">
				</td>
			</tr>
			<tr class="row4">
				<td >
				<input type="button" value="7">
				</td>
				<td >
				<input type="button" value="8">
				</td>
				<td >
				<input type="button" value="9">
				</td>
				<td >
				<input type="button" value="*">
				</td>
			</tr>
			<tr class="row5">
				<td >
				<input type="button" value="0">
				</td>
				<td>
				<input type="button" value="=">
				</td>
				<td>
				<input type="button" value=".">
				</td>
				<td>
				<input type="button" value="/">
				</td>
			</tr>
		</table>

</body>
</html>